<template>
  <el-form label-width="80px" size="small">
    <el-tabs v-model="activeName">
      <el-tab-pane label="路径飞行" name="first">
        <el-form-item label="路径集合">
          <el-input v-model="paths" type="textarea" rows="6" placeholder="请输入内容"></el-input>
        </el-form-item>
        <div class="text-right">
          <el-button v-if="!flyPath.isFlying" @click="runFlyPath" type="primary" size="mini">飞行</el-button>
          <el-button v-if="flyPath.isFlying" @click="stopFlyPath" size="mini">停止</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="绕点飞行" name="second">
        <Coordinate v-model="coord" :viewer="viewer" />
        <el-form-item label="角速度">
          <el-slider v-model="angularSpeed" :min="-1" :max="1" :step="0.1"></el-slider>
        </el-form-item>
        <el-form-item label="距离">
          <el-input v-model.number="distance" />
        </el-form-item>
        <div class="text-right">
          <el-button v-if="!flyAround.isFlying" @click="runFlyAround" type="primary" size="mini">飞行</el-button>
          <el-button v-if="flyAround.isFlying" @click="stopFlyAround" size="mini">停止</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import * as Ces from 'cesium'
import '@/components/dogeo/cesium/extends/cesium-ext.min.js'
import Coordinate from '@/components/coordinate/coordinate'
const Cesium = Ces

export default {
  name: 'tool-flight',

  components: {
    Coordinate
  },

  props: {
    viewer: {
      type: Object,
      default () {
        return null
      }
    }
  },

  data () {
    return {
      activeName: 'first',
      paths: `[
        [114.13594159507144,39.73451462031136],
        [115.06463390103714,40.181701461371205],
        [116.5095511556821,40.40895774842302],
        [117.97736448880215,40.31520119717853],
        [118.45424495523986,39.63173139217919],
        [117.49625729632648,38.740941274410424],
        [115.32785934101186,38.40611458190782],
        [114.35607731125975,38.91722585254666]
      ]`,
      flyPath: {
        isFlying: false
      },
      coord: {
        lng: 116.3905,
        lat: 39.9084,
        height: 100000,
        x: -2211741.6430,
        y: 4457380.1988,
        z: 4134345.3574
      },
      angularSpeed: 0.1,
      distance: 100000,
      flyAround: {
        isFlying: false
      }
    }
  },

  methods: {
    // 启动路径飞行
    runFlyPath () {
      this.activeFlyPath()
    },
    // 停止路径飞行
    stopFlyPath () {

    },
    activeFlyPath () {
      let paths = JSON.parse(this.paths)
      const camera = this.viewer.camera
      paths = paths.map(item => {
      let lng = item[0]
      let lat = item[1]
      let height = item[2] || 1000000
      let position = Cesium.Cartesian3.fromDegrees(lng, lat, height)
        return {
          position: position,
          direction: camera.direction,
          up: camera.up,
          lng: lng,
          lat: lat,
          height: height
        }
      })
      this.flyPath = new Cesium.GeoRoveFlight({
        viewer: this.viewer,
        path: paths,
        pathShown: true,
        pointShown: true,
        interpolationDegree: 3
      })
      this.flyPath.play()
    },
    // 启动绕点飞行
    runFlyAround () {
      let coord = this.coord
      var coordinate = [coord.lng, coord.lat, coord.height]
      this.activeFlyAround(this.viewer, {
        angularSpeed: this.angularSpeed,
        distance: this.distance,
        coordinate: coordinate
      })
    },
    // 停止绕点飞行
    stopFlyAround () {
      this.flyAround.stop()
      this.flyAround.destroy()
      this.flyAround = {}
    },
    // 绕点飞行
    activeFlyAround (viewer, options) {
      if (!this.flyAround.play) {
        // 创建绕点飞行对象
        this.flyAround = new Cesium.FlyAround({
          viewer: viewer,
          speed: options.angularSpeed, // 单位：度。正数为顺时针转动；负数为逆时针转动
          isFlying: false
        })
      }
      if (this.flyAround.isFlying) {
        this.flyAround.isFlying = false
        return true
      }
      this.flyAround.play(options.distance, options.coordinate)
    }
  }
}
</script>